<template>
  <div style="display: inline-block; margin-right: 12px">
    <el-button
      type="success"
      style="background-color: var(--theme-deep-color) !important"
      v-for="item in busBtnList"
      @click="handleBtn(item)"
      >{{ item.btnName }}</el-button
    >
    <template v-if="dynamicOpen">
      <Suspense>
        <component :is="component" :params="params" @closeDialog="closeDialog" />
      </Suspense>
    </template>
  </div>
</template>

<script setup>
import { listBusBtn } from "@/api/flowable/todo";
import { nextTick } from "vue";
import { getComponent } from "@/views/dynamic/flowComponent";
const busBtnList = ref([]);
const dynamicOpen = ref(false);
const dynamicTitle = ref("");
const params = ref({});
const component = ref(null);
const props = defineProps({
  deployId: {
    type: String,
  },
  businessData: {
    type: Object,
  },
  procInsId: {
    type: String,
  },
  taskId: {
    type: String,
  },
});

function queryBusBtnList(variables) {
  if (!props.deployId && !props.taskId) {
    busBtnList.value = [];
    return;
  }
  listBusBtn({ deployId: props.deployId, taskId: props.taskId }).then((res) => {
    let showBtnList = [];
    res.data.forEach((item) => {
      item.paramData = {};
      if (!item.params) {
        showBtnList.push(item);
        return;
      }
      let paramArray = item.params.split("、");
      let paramCount = paramArray.length;
      let matchCount = 0;
      for (let i in paramArray) {
        let param = paramArray[i];
        if (param.indexOf("autoSave") != -1) {
          paramCount--;
          continue;
        }
        if (variables && variables[param]) {
          item.paramData[param] = variables[param];
          matchCount++;
        } else if (props.businessData?.param) {
          item.paramData[param] = props.businessData[param];
          matchCount++;
        }
      }
      if (paramCount == matchCount) {
        showBtnList.push(item);
      }
    });
    busBtnList.value = showBtnList;
  });
}

function handleBtn(item) {
  //true:点击此按钮时先调用当前任务的保存按钮例如：检测报告签字。
  debugger;
  if (item?.params && item?.params.indexOf("autoSave") != -1) {
    emits("saveData", function () {
      dynamicOpen.value = false;
      nextTick(() => {
        dynamicTitle.value = item.btnName;
        dynamicOpen.value = true;
        component.value = markRaw(getComponent(item.btnUrl));
        params.value = item.paramData;
      });
    });
  } else {
    dynamicOpen.value = false;
    nextTick(() => {
      dynamicTitle.value = item.btnName;
      dynamicOpen.value = true;
      component.value = markRaw(getComponent(item.btnUrl));
      params.value = item.paramData;
    });
  }
  // setTimeout(() => {
  //   dynamicOpen.value = false
  // }, 5000);
}

function closeDialog() {
  dynamicOpen.value = false;
}

onMounted(() => {
  nextTick(() => {
    // if (!props.procInsId) {
    //   queryBusBtnList()
    // }
  });
});
const emits = defineEmits(["saveData"]);
// 记得暴露
defineExpose({
  queryBusBtnList,
});
</script>

<style></style>
